<script>
import { ref, reactive } from "vue";
import { consigneeConsigner, likeSearchBaseCargos } from "./api";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "CcrnConsigneer",
  components: {},
  setup() {
    const { navigateBack, route } = useTzRouter();
    const state = reactive({
      listDataArr: [],
      listData: [],
      consigneerType: route.query?.type,
    });
    const searchVal = ref("");
    const handleClear = () => {};
    const handleSearch = () => {
      if (searchVal.value) {
        if (
          state.consigneerType === "consigner" ||
          state.consigneerType === "consignee"
        ) {
          consigneeConsigner(searchVal.value)
            .then((res) => {
              state.listData = res.data || [];
            })
            .catch(() => {});
        } else if (state.consigneerType === "cargoCode") {
          likeSearchBaseCargos(searchVal.value)
            .then((res) => {
              state.listData = res.data || [];
            })
            .catch(() => {});
        }
      } else {
        state.listData = [];
      }
    };
    //选中当前收发货人
    const consigneerChoose = (item) => {
      if (
        state.consigneerType === "consigner" ||
        state.consigneerType === "consignee"
      ) {
        navigateBack({
          delta: 1,
          event: {
            type: state.consigneerType,
            data: item,
          },
        });
      } else if (state.consigneerType === "cargoCode") {
        navigateBack({
          delta: 1,
          event: {
            type: state.consigneerType,
            data: { ...item, index: route.query?.index },
          },
        });
      }
    };
    return () => (
      <tz-view class="ccrn-consigneer">
        <tz-cell class="search-box" border>
          <tz-search
            prefix-icon="search"
            v-model={searchVal.value}
            placeholder="请输入搜索条件"
            clearable
            round
            onClear={handleClear}
            onSearch={handleSearch}
            onChange={handleSearch}
          ></tz-search>
        </tz-cell>
        {state.listData.map((item, index) => {
          return (
            <tz-view class="list-row" key={index}>
              <tz-view class="list-row-item">
                <tz-cell
                  class="list-row-item-cont"
                  onClick={() => consigneerChoose(item)}
                >
                  <tz-icon
                    class="tz-input-icon first-icon"
                    name="search"
                  ></tz-icon>
                  <>
                    {state.consigneerType === "cargoCode" && (
                      <span>{item.cargoCode}</span>
                    )}
                    {state.consigneerType !== "cargoCode" && (
                      <span>{item.name}</span>
                    )}
                  </>
                </tz-cell>
              </tz-view>
            </tz-view>
          );
        })}
      </tz-view>
      // <span>{state.consigneerType === "cargoCode" ? {item.cargoCode} : {item.name}}</span>
      // <text>{item.cargoCode}</text>
      // <text>{item.name}</text>
    );
  },
};
</script>

<style lang="scss">
.ccrn-consigneer {
  .list-row {
    @extend %bb1;
    background-color: #ffffff;
    .list-row-item-cont {
      margin-left: 20px;
      color: #333333;
      .tz-input-icon {
        color: #c2c2c2;
        margin-right: 5px;
        font-weight: 700;
      }
    }
    &:active {
      background-color: $hover-color;
    }
  }
}
</style>
